<template>
    <div class="fans-page">
        <div class="panel-row">
            <div class="num">全部粉丝<i>{{total}}</i></div>
            <!-- <div class="mk-cus-ddl" v-if="isMySelf">
                <span class="cur">全部</span>
                <div class="sub-dd-block">
                    <ul class="sub-ddls">
                        <li><a>互相关注</a></li>
                        <li><a>未关注的</a></li>
                    </ul>
                </div>
            </div> -->
        </div>
        <div class="fans-datas">
            <div class="fans-item" v-for="(item,i) in list" :key="i">
                <div class="ldata">
                    <a class="img-box" :href="'/user/'+item.follower.id" target="_blank">
                        <img loading="lazy" v-aimgd="{avatar:item.follower.avatar,id:item.follower.id,w:80,name:item.follower.userName}"/>
                    </a>
                    <div class="basic">
                        <a class="name" :href="'/user/'+item.follower.id" target="_blank">{{item.followerName}}<img loading="lazy" class="u-m-tag" v-for="tag in item.follower.tagsList" :src="tag.image" alt=""></a>
                        <div class="num-b">
                            <span><b>{{item.follower.fansStr}}</b>粉丝</span>
                            <span><b>{{item.follower.seeStr}}</b>人气</span>
                        </div>
                        <div class="desc">
                            {{item.follower.province&&item.follower.city?item.follower.province+'|'+item.follower.city:''}}{{item.follower.subhead?(item.follower.province?'｜':'')+item.follower.subhead:''}}
                        </div>
                        <div class="time-desc" v-if="item.follower.updateTimeStr">{{item.follower.updateTimeStr}} 新增了发布</div>
                    </div>
                </div>
                <div class="rdata">
                    <div class="works">
                        <a><img loading="lazy" v-for="(item,idx) in item.followerArticles" :key="idx" :src="item.image" alt="" ></a>
                    </div>
                    <div class="opbtn">
                        <template v-if="isMySelf">
                            <a class="hx-attention" @click="handleFollow(item)" v-if="item.mutualSubscribe==1">互相关注</a>
                            <a class="attention-here" @click="handleFollow(item)" v-else>关注Ta</a>
                            <!-- <a class="remove" v-if="isMySelf">移除</a> -->
                        </template>
                        <a class="attention-here" :class="{'active':item.follower.isSubscribe==1}" @click="handleFollow(item)" v-else>{{item.follower.isSubscribe==0?'关注Ta':'已关注'}}</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="pro-page-layout" v-if="list.length>0">
            <el-pagination
                background @current-change="pageChange"
                :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
                layout="prev,pager,next"
                :total="total">
            </el-pagination>
            <!-- <span class="page-prev" @click="handlePagePrev"></span>
            <span class="page-tip">第 {{queryParams.pageNum}} 页，共 {{totalPage}} 页</span>
            <span class="page-next" @click="handlePageNext"></span> -->
        </div>
        <!-- <div class="no-more-text" v-if="!hasMore&&!isloading&&list.length>0">没有更多了</div> -->
        <Empty text="没有找到符合条件的结果~" v-if="!isloading&&list.length==0"/>
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'
export default {
    components:{Empty},
    data(){
        return {
            isMySelf:false,
            loginUid:'',
            isloading:true,
            defaultAvatar: require('../../assets/pro/default_uimg.svg'),
            isInEdit:false,
            total:0,
            queryParams:{
                orderByColumn:'createTime',
                isAsc:'desc',
                pageNum:1,
                pageSize:10,
                keyword:'',
                currentUserId:''
            },
            list:[]
        }
    },
    methods:{
        async handleFollow(item) {
            if (item.mutualSubscribe==1) {
                let res = await api.cancelFollowTo(item.follower.id);
                if (res.code == 0) {
                if(this.isMySelf)
                    item.mutualSubscribe = 0;
                else
                    item.follower.isSubscribe=0;
                this.$amessage.success('已取消，有缘再见～')
                }
            }
            else {
                let res = await api.followTo(item.follower.id);
                if (res.code == 0) {
                    this.$bhelper.addCirRecord('FOLLOW');
                    if(this.isMySelf)
                        item.mutualSubscribe = 1;
                    else
                        item.follower.isSubscribe=1;
                    this.$amessage.success('关注+1，灵感不断！')
                }
            }
        },
        onImgError(e){
            e.target.src=require('../../assets/pro/default_uimg.svg');
        },
         get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
            if (!member.id || !member.avatar) return this.defaultAvatar
            let hash = SparkMD5.hash(member.avatar).slice(0, 6)
            return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
        },
        get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
            return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
        },
        handlePagePrev(){

        },
        pageChange(_val){
            $('body,html').animate({ scrollTop: 0 }, 0);
            this.queryParams.pageNum=_val;
            this.queryList();
        },
        handlePageNext(){

        },
        async queryList(){
            this.isloading=true;
            // const loading = this.$loading({
            //     lock: true,
            //     text: '努力加载中...',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            let res=await api.fansList(this.queryParams);
            // loading.close();
            this.isloading=false;
            this.list=res.data;
            this.total=res.total;
        }
    },
    mounted(){
        this.loginUid=localStorage.getItem('userId');
        let routeQuery = this.$route.query;
        if(routeQuery.u){
            this.queryParams.currentUserId = routeQuery.u;
            this.isMySelf = routeQuery.u == this.loginUid;
        }else{
            this.isMySelf=true;
            this.queryParams.currentUserId = this.loginUid;
        }
        this.queryList();

        this.$nextTick(() => {
            if($('.t-adv').length>0){
                $('#app').addClass('b-has-adv');
            }
        })
    }
}
</script>
<style lang="less">
.fans-page{
    .pro-page-layout{
        text-align: center;
        margin-top:20px;
        // .el-pagination{
        //     .btn-next,.btn-prev{
        //         width:34px;height:34px;
        //         line-height: 34px;
        //         background:#181818;
        //         color:#969696;
        //             border-radius:8px;
        //     }
        //     .el-pager{
        //         li{
        //             width:34px;height:34px;
        //             line-height: 34px;
        //             background:#181818;
        //             color:#969696;
        //             border-radius:8px;
        //             font-size:12px;
        //             margin:0px 6px;
        //             &.active,&:not(.disabled).active{
        //                 background:#181818;
        //                 color:#fff;
        //             }
        //             &:hover,&:not(.disabled):hover{
        //                 color:#fff;
        //             }
        //         }
        //     }
        // }
    }
    .panel-row{
        display: flex;
        align-items: center;
        justify-content:space-between;
        margin-bottom:27px;
        // border:1px solid red;
        height:42px;
        .num{
            font-size:16px;
            i{
                font-style: normal;
                color:#11CCB1;
                margin-left:5px;
            }
        }
        
    }
    .fans-datas{
        .fans-item{
            height:140px;
            border-radius:16px;
            margin-bottom:20px;
            background:#181818;
            display:flex;
            align-items: center;
            justify-content: space-between;
            padding-left:30px;
            padding-right:30px;
            .ldata{
                display: flex;
                align-items: center;
                .img-box{
                    width:80px;height:80px;
                    border-radius:80px;
                    margin-right:29px;
                    overflow: hidden;
                    min-width:80px;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                .name{
                    font-size:16px;
                    font-weight:500;
                    line-height:22px;
                    &:hover{
                        color:#11CCB1;
                    }
                }
                .num-b{
                    font-size:14px;
                    margin-top:7px;
                    font-weight:600;
                    span{
                        &:first-child{
                            margin-right:10px;
                        }
                    }
                }
                .desc{
                    margin-top:6px;
                    margin-bottom:6px;
                    color:#969696;
                    font-size:14px;
                }
                .time-desc{
                    color:#969696;
                }
            }
            .rdata{
                display: flex;
                align-items: center;
                .works{
                    img{
                        width:100px;height:100px;
                        object-fit:cover;
                        border-radius:16px;
                        margin-right:10px;
                    }
                }
                .opbtn{
                    margin-left:32px;
                    font-size:16px;
                    user-select: none;
                    .hx-attention{
                        line-height:44px;
                        background:#29272F;
                        border-radius:8px;
                        width:90px;
                        text-align: center;
                        color:#fff;
                        display: inline-block;
                    }
                    .attention-here{
                        line-height:44px;
                        background:#11CCB1;
                        border-radius:8px;
                        width:90px;
                        text-align: center;
                        color:#fff;
                        display: inline-block;
                        transition:.1s all linear;
                        &.active{
                            background:#29272F;
                        }
                        &:not(.active):hover{
                            background:#0fab94;
                        }
                    }
                    .remove{
                        line-height:44px;
                        background:#29272F;
                        border-radius:8px;
                        width:90px;
                        text-align: center;
                        color:#fff;
                        display: inline-block;
                        margin-left:10px;
                    }
                }
            }
        }
    }
}




















































</style>